import React, { FC, useEffect, useCallback } from 'react'
import { View, Text, Image, TouchableOpacity } from 'react-native'
import styles from './styleCookbook'
import useFetchData from '../../../hooks/useFetchData'
import { useNavigation, CompositeNavigationProp, NavigatorScreenParams } from '@react-navigation/native'
import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs'
import { StackNavigationProp } from '@react-navigation/stack'

type Props = {
  naviation: any
}

type StackParamList = {}

type TabParamList = {
  Home: undefined;
  Detail: undefined;
  List: {}
};

type ProfileScreenNavigationProp = CompositeNavigationProp<
  BottomTabNavigationProp<TabParamList, 'List'>,
  StackNavigationProp<StackParamList>
>;

const HotCate:FC<Props> = () => {
  const { list } = useFetchData('http://localhost:9000/hotcat')
  const naviation = useNavigation<ProfileScreenNavigationProp>()

  const handlePress = useCallback(
    (item: { [props: string]: any }) => {
      return () => {
        naviation.navigate('List', {
          item
        })
      }
    },
    [naviation],
  )

  return (
    <View style={styles.hotcateWrapper}>
      <View style={styles.hotcateTitle}>
        <Text style={styles.hotcateTitleText}>热门分类</Text>
      </View>
      <View style={styles.hotcateList}>
        {
          list.map((li, index) => {
            return (
              <TouchableOpacity
                style={styles.hotcateItem}
                key={index}
                onPress={handlePress(li)}
              >
                <View>
                  <Image 
                    source={{uri: li.img}}
                    style={styles.hotcateImage}
                  ></Image>
                  <Text
                    style={styles.hotcateNameText}
                  >{li.title}</Text>
                </View>
              </TouchableOpacity>
            )
          })
        }
        <View 
          style={styles.hotcateItem}
        >
          <Text
            style={styles.hotcateNameText}
          >更多...</Text>
        </View>
      </View>
    </View>
  )
}

export default HotCate


